import { getUserAppletDetail, modUserApplet } from "@/api/modules/applet/userApplet";
import Navigation from "@/components/Frame/Navigation";
import PageHeader from "@/components/Frame/PageHeader";
import { useRoute } from "vue-router";
import StatusDetail from "./statusDetail";
import BasicDialog from "./detailDialog";
import { showTips } from "@/utils/util";
import NodeDetail from "./nodeDetail";
import ServiceDetail from "./serviceDetail";
import { AuthBtns } from "@/utils/constants";
import { useAuthButtonList } from "@/hooks/useAuthButtons";

export default defineComponent({
	setup() {
		const route = useRoute();
		const state = reactive<any>({ basicDetail: {} });
		const operateList = ref<any>([]);
		provide(AuthBtns.operateList, operateList);
		onMounted(async () => {
			let btns = await useAuthButtonList("applet-user");
			operateList.value = btns.filter((item: any) => item.type == "operate");
			init();
		});
		const init = async () => {
			let { result } = await getUserAppletDetail({ id: route.query.id as string });
			state.basicDetail = result;
		};
		const navList = reactive([
			{ label: "基本信息", value: "status" },
			{ label: "服务管理", value: "node" },
			{ label: "服务部署", value: "service" }
		]);
		const active = ref<string>("");
		const changeView = (info: { label: string; value: string }) => {
			active.value = info.value;
		};
		const detailDialog = reactive<any>({
			title: "修改应用",
			visible: false
		});
		const handleFn = (fn: string) => {
			switch (fn) {
				case "mod":
					detailDialog.visible = true;
					break;
			}
		};
		const submitAdd = async () => {
			let res = await modUserApplet({ ...state.basicDetail });
			let ok = showTips(res.code, "修改应用", res.message);
			if (ok) {
				detailDialog.visible = false;
			}
		};
		//网关scheme：设备参数配置模型
		return () => {
			return (
				<div>
					<BasicDialog
						width="800px"
						title={detailDialog.title}
						v-model:visible={detailDialog.visible}
						detail={state.basicDetail}
						onSubmit={submitAdd}
					></BasicDialog>
					<PageHeader
						showBackText={false}
						v-slots={{
							operate: () => {
								return operateList.value.some((item: any) => item.component == "mod") ? (
									<el-button onClick={() => handleFn("mod")}>编辑</el-button>
								) : (
									""
								);
							}
						}}
					>
						<span>{state.basicDetail.name}</span>
						{/* <el-link
							class="iconfont iconbx-sync ml-2"
							type="primary"
							onClick={() => {
								init();
							}}
						>
							刷新
						</el-link> */}
					</PageHeader>
					<Navigation navList={navList} onChange={changeView} active={active.value} showToggle={false} />
					<div class="bg-white detail-type-detail">
						{active.value == "status" && (
							<StatusDetail basicDetail={state.basicDetail} onClickDetailMod={() => handleFn("mod")} />
						)}
						{active.value == "node" && <NodeDetail class="pt-6" />}
						{active.value == "service" && <ServiceDetail />}
					</div>
				</div>
			);
		};
	}
});
